<template>
  <div class="rotation">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <i></i>
        <h2>返回</h2>
      </div>
      <el-card class="rotation_body">
        <h1>轮播图</h1>
        <div class="btn">
          <el-button @click="handleAdd">+ 新增轮播图</el-button>
          <el-button @click="handleDel">- 删除轮播图</el-button>
        </div>
        <el-table
          class="rotation_body"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          fit
          @selection-change="handleSelectionChange"
          :header-cell-style="{background:'#E9F4FD',color:'#212121'}"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="编号" width="120">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column prop="name" label="位置" width="120"></el-table-column>
          <el-table-column prop="address" label="软件图片" show-overflow-tooltip></el-table-column>
          <el-table-column prop="address" label="软件名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="address" label="创建者" show-overflow-tooltip></el-table-column>
          <el-table-column prop="address" label="时间" show-overflow-tooltip></el-table-column>
          <el-table-column fixed="right" label="操作" width="200px" class="widthfh">
            <template slot-scope="scope">
              <el-button class="handle" @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button class="handle" type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-card>
  </div>
</template>


<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "1",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "3",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "4",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "5",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ],
      multipleSelection: [],
      token: this.$route.query.token
    };
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 点击新增
    handleAdd() {
      this.$router.push({
        path: "/add_rotation",
        query: { token: this.token }
      });
    },
    // 点击删除
    handleDel() {
      this.$router.push({
        path: "/del_rotation",
        query: { token: this.token }
      });
    }
  }
};
</script>



<style scoped>
.clearfix {
  position: relative;
  margin-top: 10px;
  margin-bottom: 6px;
}
.rotation .clearfix i {
  display: block;
  position: absolute;
  top: 9px;
  left: 0;
  width: 10px;
  height: 20px;
  background: url()
    no-repeat;
  background-size: 10px 20px;
  /* vertical-align: middle; */
  margin-left: 50px;
}
.rotation h2 {
  margin: 0;
  font-size: 20px;
  display: inline;
  margin-left: 72px;
  color: #3f51b5;
}
.rotation_body h1 {
  display: inline-block;
  font-size: 32px;
  color: #4c4c4c;
  margin-top: 8px;
}
.btn {
  float: right;
}
.btn .el-button {
  border-radius: 5px;
  color: #ffffff;
}
.el-button {
  border: 0;
}
.btn .el-button:nth-child(1) {
  background: #ff3c00;
}
.btn .el-button:nth-child(2) {
  background: #bdbdbd;
}
.el-table {
  margin-top: 31px;
}
.handle {
  font-size: 18px;

  color: #212121;
}
.widthfh {
  width: 500px;
}
.rotation_body {
  margin-bottom: 136px;
}
</style>